$spriteSrc:'/images/sprite.png';

$spriteWidth: 568px;
$spriteHeight: 555px;
$button: -300px -355px 179px 57px;
$close: -305px -150px 34px 34px;
$exchange: 0px 0px 200px 200px;
$left: -396px -146px 163px 110px;
$logo: -396px -264px 161px 55px;
$lottery-bg-active: -208px 0px 180px 142px;
$lottery-bg: -396px 0px 172px 138px;
$lotteryed: -179px -208px 171px 139px;
$receive-btn: -97px -355px 195px 62px;
$regular: -208px -150px 89px 47px;
$repeat: -347px -150px 21px 22px;
$right: 0px -355px 89px 200px;
$soon-lottery: 0px -208px 171px 139px;

@function px2rem ($px) {
  @if (type-of($px) == "number") {
    @return $px / 20px * 1rem;
  }
  @if (type-of($px) == "list") {
    @if (nth($px, 1) == 0 and nth($px, 2) != 0) {
      @return 0 nth($px, 2) / 20px * 1rem;
    } @else if (nth($px, 1) == 0 and nth($px, 2) == 0)  {
      @return 0 0;
    } @else if (nth($px, 1) != 0 and nth($px, 2) == 0) {
      @return nth($px, 1) / 20px * 1rem 0;
    } @else {
      @return nth($px, 1) / 20px *1rem nth($px, 2) / 20px * 1rem;
    }
  }
}

@mixin sprite-width($sprite) {
	width: px2rem(nth($sprite, 3));
}

@mixin sprite-height($sprite) {
	height: px2rem(nth($sprite, 4));
}

@mixin sprite-position($sprite) {
	$sprite-offset-x: px2rem(nth($sprite, 1));
	$sprite-offset-y: px2rem(nth($sprite, 2));
	background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite($sprite) {
	@include sprite-position($sprite);
	@include sprite-width($sprite);
	@include sprite-height($sprite);
    background-image: url('#{$spriteSrc}');
	background-repeat: no-repeat;
	background-size: px2rem(($spriteWidth, $spriteHeight));
    display: inline-block;
}


@mixin mix-button() {
    @include sprite($button);
}
@mixin mix-close() {
    @include sprite($close);
}
@mixin mix-exchange() {
    @include sprite($exchange);
}
@mixin mix-left() {
    @include sprite($left);
}
@mixin mix-logo() {
    @include sprite($logo);
}
@mixin mix-lottery-bg-active() {
    @include sprite($lottery-bg-active);
}
@mixin mix-lottery-bg() {
    @include sprite($lottery-bg);
}
@mixin mix-lotteryed() {
    @include sprite($lotteryed);
}
@mixin mix-receive-btn() {
    @include sprite($receive-btn);
}
@mixin mix-regular() {
    @include sprite($regular);
}
@mixin mix-repeat() {
    @include sprite($repeat);
}
@mixin mix-right() {
    @include sprite($right);
}
@mixin mix-soon-lottery() {
    @include sprite($soon-lottery);
}
